<template>
  <div class="shiList">

    <div class="shiTable">
      <div   class="demo-input-suffix">
        <div class="searchBar">
          <!--            <el-button type="primary" @click="hqSelect" size="mini">导入数据</el-button>-->
         <!-- <el-button type="goon" round size="medium" v-has="'xiazai'"  @click="hqSelect" v-show="bt"> 下载成果数据 </el-button>-->
          切换行政级别：
          <el-select size="medium"
                     v-model="value"
                     @change="changeHandle(value)"
                     placeholder="请选择师级区域">
            <el-option
              size="medium"
              v-for="(item,index) in theOptions"
              v-if="item.isShow"
              :key="index"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>

      </div>
      <div   class="vectortable" v-show="isBt">
      <el-table
        :data="theTextAchievementsInfosSuccess"
        border
        mini
        :stripe="true"
        style="width: 100%"
        height="100%"
        center
      >
        <el-table-column
          fixed
          prop="ID"
          label="序号"
          width="60">
        </el-table-column>
        <el-table-column
          prop="fileName"
          label="矢量文件"
          width="300">
        </el-table-column>
        <el-table-column
          prop="uploadDate2"
          label="上传时间"
          width="240">
        </el-table-column>
        <el-table-column
          prop="verifyType2"
          label="审核方式"
          width="240">
        </el-table-column>
        <el-table-column
          prop="verifyContent"
          label="当前审核状态"
          width="300">
        </el-table-column>
        <el-table-column
          prop="isApproved2"
          label="下一阶段审核描述"
          width="220">
        </el-table-column>
        <el-table-column
          width="110"
          label="审核人"
          prop="reportUser">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="下载文件"
        >
          <template slot-scope="scope">
            <el-tooltip effect="light" content="下载" placement="top" :enterable="false"  v-has="'xiazai'">
              <el-button @click="download(scope.row.files)" type="primary" size="mini"><i class="el-icon-download"></i></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="[15,20,30,50]"
          :page-size="15"
          layout="total, sizes, prev, pager, next, jumper"
          :total=theTextAchievementsInfosTotalSuccess>
        </el-pagination>
      </div>
    </div>
      <div   class="vectortable" v-show="!isBt">
        <el-table
          :data="shiData"
          border
          mini
          :stripe="true"
          style="width: 100%"
          height="100%"
          center
        >
          <el-table-column
            type="index"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            prop="fileName"
            label="矢量文件"
            width="300">
            <template slot-scope="scope">
              {{scope.row.files[0].fileName}}
            </template>
          </el-table-column>
          <el-table-column
            prop="reportUser"
            label="上传人"
            width="100">
          </el-table-column>
          <el-table-column
            prop="reportUnit"
            label="上传单位"
            width="180">
          </el-table-column>
          <el-table-column
            prop="uploadDate"
            label="上传时间"
            width="150">
          </el-table-column>
          <el-table-column
            prop="verifyType"
            label="审核方式"
            width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.verifyType">人工审核</span>
              <span v-else>系统审核</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="verifyContent"
            label="当前审核状态"
            width="280">
          </el-table-column>
          <el-table-column
            prop="verifyUnit"
            label="审核单位"
            width="180">
          </el-table-column>
          <el-table-column
            width="100"
            label="审核人"
            prop="verifyUser">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="下载文件"
          >
            <template slot-scope="scope">
              <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                <el-button @click="downloadShi(scope.row.files)" type="primary" size="mini"><i class="el-icon-download"></i></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChangeShi"
            @current-change="handleCurrentChangeShi"
            :current-page="queryInfo.pageNumber"
            :page-sizes="[15,20,30,50]"
            :page-size="15"
            layout="total, sizes, prev, pager, next, jumper"
            :total=totalShi>
          </el-pagination>
        </div>
      </div>
      <el-dialog
        title="导入成果数据"
        :visible.sync="dialogVisible"
        width="25%"
        :close-on-click-modal=false
        center
        @close='closeDialog'
        :destroy-on-close="true"
      >
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
          <el-form-item label="数据下载方式" prop="DownloadTheWay">
            <el-radio-group v-model="ruleForm.DownloadTheWay" @change="downloadMethod">
              <el-radio :label="0">按师下载</el-radio>
              <el-radio :label="1">按矢量文件类型下载</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item  v-show="showOr" label="师级行政单元" prop="id">
            <el-select size="medium" v-model="ruleForm.id" placeholder="请选择师级行政单元">
              <el-option v-for="(itme,index) in theOptions" v-if="itme.isShow && itme.name!=='新疆生产建设兵团'"  v-bind:key="index" :label="itme.name" v-bind:value="itme.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item  v-show="!showOr" label="矢量文件类型" prop="id">
            <el-select size="medium" v-model="ruleForm.id" placeholder="请选择矢量文件类型">
              <el-option v-for="(itme,index) in theVectorFileCategoryList" v-bind:key="index" :label="itme.name" v-bind:value="itme.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="goon" round size="medium" @click="submitForm('ruleForm')">下 载</el-button>
            <el-button type="goon" round size="medium" @click="resetForm('ruleForm')">重 置</el-button>
          </el-form-item>
        </el-form>

      </el-dialog>
    </div>
  </div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex'
const {mapGetters} = createNamespacedHelpers('dirmanage')

export default {
  name: 'Theapproved',
  data() {
    return {
      options2:[],
      options: [{
        value: 1,
        label: '第一师'
      }, {
        value: 2,
        label: '第二师',
      }, {
        value: 3,
        label: '第三师',
      }, {
        value: 4,
        label: '第四师',
      }, {
        value: 5,
        label: '第五师',
      }, {
        value: 6,
        label: '第六师',
      }, {
        value: 7,
        label: '第七师',
      }, {
        value: 8,
        label: '第八师',
      }, {
        value: 9,
        label: '第九师',
      }, {
        value: 10,
        label: '第十师',
      }, {
        value: 11,
        label: '第十一师',
      }, {
        value: 12,
        label: '第十二师',
      }, {
        value: 13,
        label: '第十三师',
      }, {
        value: 14,
        label: '第十四师',
      }],
      dialogVisible: false,
      dialog2Visible:false,
      currentPage1: 1,
      requestParams:{
        pageNumber:1,
        pageSize:15,
        isApproved:1,
      },
      showOr:true,
      ruleForm: {
        DownloadTheWay: 0,
        id:''
      },
      rules: {
        DownloadTheWay: [
          { required: true, message: '请选择下载方式', trigger: 'change' }
        ],
        id: [
          { required: true, message: '请选择师', trigger: 'change' }
        ],
      },
      bt:false,
      isBt:true,
      value:21,
      queryInfo:{
        pageNumber:1,
        pageSize:15,
        cityId:''
      },
      totalShi:0,
      shiData:[]
    };
  },
  created () {
    if (window.sessionStorage.getItem('shi') === '65'){
      this.bt=true
    }else {
      this.bt=false
    }
  },
  mounted() {
    this.$store.dispatch('dirmanage/getDivisionAchievementsVerified',this.requestParams)
    this.$store.dispatch('dirmanage/getVectorFileCategory')
    this.$store.dispatch('dirmanage/getfindAllByDivision')
  },
  methods:{
    downloadMethod(){
      if (this.ruleForm.DownloadTheWay===0){
        this.showOr = true
      }
      else{
        this.showOr = false
      }
    },
    downloadFile(url){
      const iframe = document.createElement("iframe");
      iframe.style.display = "none";  // 防止影响页面
      iframe.style.height = 0;  // 防止影响页面
      iframe.src = url;
      document.body.appendChild(iframe);  // 这一行必须，iframe挂在到dom树上才会发请求
      // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
      setTimeout(()=>{
        iframe.remove();
      }, 1 * 60 * 1000);
    },
    download(files){
      for(let i =0;i<files.length;i++){  //循环遍历调用downloadFile方法
       //  const url = 'http://10.16.11.240:15480/'+files[i].filePath;
      const url = 'https://10.226.77.11/fils'+files[i].filePath;
      //     const url = 'http://59.223.239.59:8803/'+files[i].filePath;
       //  const url = 'http://10.222.77.11:8803/'+files[i].filePath;
        //   const url = 'http://localhost:8803/'+files[i].filePath;
        this.downloadFile(url);
      }
     /* for(let i in files){
        console.log(files[i])
        let a = document.createElement('a')
        a.href = 'http://localhost:8803/'+files[i].filePath;
        let e = document.createEvent('MouseEvents')
        e.initEvent('click', false, false)
        a.dispatchEvent(e)
        document.body.removeChild(a);
      /!*  window.location.href = 'http://localhost:8803/'+files[i].filePath;*!/
        //  window.location.href = 'http://10.16.11.240:15480/'+files[i].filePath;
        //   window.location.href = 'http://59.223.239.59:8803/'+files[i].filePath;
      }*/
    },
    downloadShi(files){
      for(let i in files){
        //  window.location.href = 'http://localhost:8803/'+files[i].filePath;
       //  window.location.href = 'http://10.16.11.240:15480/'+files[i].filePath;
     //   window.location.href = 'http://59.223.239.59:8803/'+files[i].filePath;
         window.location.href = 'https://10.226.77.11/fils'+files[i].filePath;
      //    window.location.href = 'https://10.222.77.11/fils'+files[i].filePath;
      }
    },
     changeHandle(value){
      console.log(value)
      if(value ==21){
        this.isBt=true;
        this.$store.dispatch('dirmanage/getDivisionAchievementsVerified',this.requestParams)
      }else {
        this.isBt=false;
        this.getShiFile();
      }
    },
    async getShiFile(){
      const {data:res}=await  this.$http.get('/v1.0/resultIntegration/achievements/temp/report/findPages1?pageNumber='+this.queryInfo.pageNumber+'&pageSize='+this.queryInfo.pageSize+'&cityId='+this.value)
      if(res.status!='3000'){
        this.shiData=[];
        return this.$message.error(res.message)
      }
      this.shiData=res.data.result;
      for(let i in this.shiData){
        this.shiData[i].uploadDate=new Date(this.shiData[i].uploadDate)
        console.log(this.shiData[i].uploadDate)
        this.shiData[i].uploadDate=this.shiData[i].uploadDate.getFullYear()+"-"+(this.shiData[i].uploadDate.getMonth()+1)+"-"+this.shiData[i].uploadDate.getDate()
      }
      this.totalShi=res.data.totalCount
    },
    submitForm(formName) {
      this.$refs[formName].validate( async (valid) => {
        if (valid) {
          if (this.ruleForm.DownloadTheWay === 0){
           // await  this.$store.dispatch('dirmanage/getZipFileByCityId', {id:this.ruleForm.id})
           await this.$http.get('/v1.0/resultIntegration/achievements/temp/fileTemp/zipFileByCityId/'+ this.ruleForm.id).then((response) =>{
               if (response.data.status ==='6070'){
                 this.$message.success(response.data.message)
               }
               else{
                 this.$message.error(response.data.message)
               }
              }
            )
          }
          else{
           // await  this.$store.dispatch('dirmanage/getZipFileCategoryId',{id:this.ruleForm.id})
            await this.$http.get('/v1.0/resultIntegration/achievements/temp/fileTemp/zipFileCategory/'+ this.ruleForm.id).then((response) =>{

                if (response.data.status ==='6070'){
                  this.$message.success(response.data.message)
                }
                else{
                  this.$message.error(response.data.message)
                }
                }
            )
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSizeChange(val) {
      this.requestParams.pageSize = val
      this.$store.dispatch('dirmanage/getDivisionAchievementsVerified',this.requestParams)
    },
    handleCurrentChange(val) {
      this.requestParams.pageNumber = val
      this.$store.dispatch('dirmanage/getDivisionAchievementsVerified',this.requestParams)
    },
    handleSizeChangeShi(val){
      this.queryInfo.pageSize = val;
      this.getShiFile();
    },
    handleCurrentChangeShi(val) {
      this.queryInfo.pageNumber = val
      this.getShiFile();
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
   async hqSelect(){
      // await  this.$http3.get( '/v1.0/unit/find/city/findAll').then((response)=>{
      //   console.log(response.data.data)
      //   this.options2 = response.data.data
      // })
      this.dialogVisible=true;
    },

    closeDialog(){
      this.dialogVisible = false
    },

    downloadZip(){

      }
  },
  computed:{
    ...mapGetters(['theTextAchievementsInfosSuccess']),
    ...mapGetters(['theTextAchievementsInfosTotalSuccess']),
    ...mapGetters(['theVectorFileCategoryList']),
    ...mapGetters(['theOptions'])
  },
  //  mounted() {
  //    this.$store.dispatch('dirmanage/getCatlog')
  //  }
}
</script>

<style scoped lang="scss">
::v-deep .el-table td{
  padding: 13px 0 ;
}
.vectortable{
  position: absolute;
  top: 6%;
  width: 98%;
  padding: 1%;
  /*height: 100%;*/
  height: calc(100% - 12%);
}
.shiList{
  position: absolute;
  left: 15.5%;
  //height: 87%;
  top: 9.5%;
  bottom: 1.5%;
  width: 83.5%;
  /*background-color: #ffffff;*/
  border-radius: 8px;
  /*border: 1px red solid;*/
}
#topAside{
  position: absolute;
  width: 100%;
  //height:56px;
  top: 1%;
  text-align: center;
  /*background-color: #545c64;*/
  border-radius: 8px 0;
}
::v-deep ul{list-style:none;display:inline-block;}
::v-deep .el-menu-item{
  font-size: 16px;
  padding:0 40px
}
::v-deep .el-menu--horizontal>.el-menu-item{
  height: 56px;
}
.shiTable{
  position: absolute;
  //top: 6%;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  //padding: 1%;
  border-radius: 8px;
  box-shadow: 0 0 5px #acc4fe;

}
/*.demo-input-suffix{*/
/*  !*height: 60px;*!*/
/*  padding: 10px;*/
/*}*/
.searchBar{
  display: inline-block;
  position: absolute;
  width: 98%;
  /*padding: 10px;*/
  background-color: #ffffff;
  padding: 1%;
  border-radius: 8px;
}
.el-input{
  width: 12%!important;
}
.searchBar > span{
  /*padding: 10px;*/
  font-size: 14px;
}
.margin_left{
  margin-left: 55%;
  margin-right: 20px;
}
span{
  color: #203f6e;
  font-size: 14px;
}

::v-deep .el-button--goon:focus, .el-button--goon:hover {
  color: #fff;
  border-color: #25e4a3;
  background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
}
::v-deep .el-button--goon:active {
  color: #fff;
  border-color: #25e4a3;
  outline: 0;
}

#topAside {
  ::v-deep .el-button{
    width: 15%;
    font-size: 14px;
    //color: #a5b1ad;
    box-shadow: 0 0 2px #acc4fe;
  }
  ::v-deep .el-button:focus, .el-button:hover {
    color: #fff;
    border-color: #c6e2ff;
    background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
  }
  ::v-deep .el-button--goon:active {
    color: #fff;
    border-color: #c6e2ff;
    outline: 0;
  }
}

::v-deep .el-input__inner{
  //border-radius: 45px;
}

::v-deep .el-dialog__title{
  font-weight: bold;
  font-size: 20px;
  color: #45524f;
}
.el-dialog__body{
  .el-form{
    .el-form-item {
      .el-form-item__content{
        .el-input{
          ::v-deep  .el-input__inner{
            border-radius: 45px;
          }
        }

      }
    }
  }
}
::v-deep .el-select .el-input__inner{
  border-radius: 45px;
}
//::v-deep .el-dialog__headerbtn .el-dialog__close{
//  display: none;
//}
::v-deep .el-form-item__content{
  ::v-deep  .el-input__inner{
    border-radius: 45px;
  }
}
::v-deep .el-dialog__header {
  //background: -webkit-linear-gradient(left, #3ee8c2, #25e4a3);
  padding: 10px;
  border-radius: 8px 8px 0 0 ;
}
::v-deep .el-dialog{
  border-radius: 8px;
  ul{
    display: block;
  }
}

::v-deep .el-message-box__btns{
  ::v-deep .el-button:focus, .el-button:hover {
    color: #fff;
    border-color: #c6e2ff;
    background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
  }
  ::v-deep .el-button:active {
    color: #fff;
    border-color: #c6e2ff;
    outline: 0;
  }
}
::v-deep .el-dialog__headerbtn{
  top: 13px;
}
::v-deep .cell{
  text-align: center;
}
::v-deep .el-table__body-wrapper {
  /*height: 200px; !* 滚动条整体高 必须项 *!*/
  border-right: none;
  overflow-y: scroll;/* overflow-y为了不出现水平滚动条*/
}
::v-deep .el-dialog--center .el-dialog__body{
  padding: 10px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width:6px;/* 滚动条的宽高 必须项 */
  height: 5px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #bfcbd9;/* 滚动条的宽 */
  border-radius: 3px;
}

</style>
